<template>
  <Layout class-name="mine" padding-top="0">
    <view class="mine-page">
      <view class="mine-head-wrapper" @click="skip('/pages/my/profile')">
        <view class="avatar-box">
          <image v-if="vuex_token && user && user.avatar" class="avatar" mode="aspectFill" :src="user.avatar"></image>
          <image v-else class="avatar" mode="aspectFill" src="/static/avatar.png"></image>
        </view>
        <view class="avatar-info">
          <view v-if="vuex_token && user" class="logined-info">
            <view class="name">{{user.nickname}}</view>
            <view class="id">ID：{{user.id}}</view>
          </view>
          <view v-else class="nologin" @click="skipLogin">
            登录/注册
            <view class="arrow"></view>
          </view>
          
        </view>
        <u-icon v-if="vuex_token && user" name="arrow-right" color="#fff"></u-icon>
      </view>
      <view class="mine-menu-wrapper">
        <view class="menu-group">
          <view class="menu-item" @click="skip('/home/mine/registration')">
            <image class="icon" src="/static/icon/mine-ico-1.png"></image>
            <view class="title">报名记录</view>
            <view class="arrow"></view>
          </view>
          <!-- <view class="menu-item" @click="skip('/home/mine/coupon')">
            <image class="icon" src="/static/icon/mine-ico-2.png"></image>
            <view class="title">我的优惠券</view>
            <view class="arrow"></view>
          </view> -->
          <!-- <view class="menu-item">
            <image class="icon" src="/static/icon/mine-ico-3.png"></image>
            <view class="title">打卡印章</view>
            <view class="arrow"></view>
          </view> -->
        </view>
        <view class="menu-group">
          <view class="menu-item" @click="skip('/home/mine/protocol?type=aboutUs')">
            <image class="icon" src="/static/icon/mine-ico-4.png"></image>
            <view class="title">关于我们</view>
            <view class="arrow"></view>
          </view>
          <view v-if="vuex_token" class="menu-item" @click="handleLogout">
            <image class="icon" src="/static/icon/mine-ico-5.png"></image>
            <view class="title">退出登录</view>
            <view class="arrow"></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部导航 -->
    <fa-tabbar />
  </Layout>
</template>

<script>
  // #ifdef MP-WEIXIN
  uni.hideHomeButton();
  // #endif
  export default {
    data() {
      return {
      };
    },
    computed: {
      user() {
        return this.vuex_user;
      }
    },
    onShow() {
      if (this.vuex_token) {
      	this.getUserIndex();
      } else {
      	this.$u.vuex('vuex_user', {});
      }
    },
    methods: {
      getUserIndex: async function() {
      	let res = await this.$api.getUserIndex();
      	uni.stopPullDownRefresh();
      	if (res.code == 1) {
      		this.$u.vuex('vuex_user', res.data.userInfo || {});
      		// if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
      		// 	this.$u.vuex('vuex_setting.prompted', true);
      		// 	uni.showModal({
      		// 		title: '温馨提示',
      		// 		confirmText: '去设置',
      		// 		cancelText: '取消',
      		// 		showCancel: true,
      		// 		content: '当前未设置昵称，请设置昵称后再继续操作',
      		// 		success: (res) => {
      		
      		// 			if (res.confirm) {
      		// 				this.$u.route("/pages/my/profile");
      		// 			} else if (res.cancel) {
      		
      		// 			}
      		// 		}
      		// 	});
      		// }
      	} else {
      		this.$u.toast(res.msg);
      		return;
      	}
      },
      
      skipLogin() {
        uni.navigateTo({
          url: '/pages/login/mobilelogin'
        })
      },
      // 页面调整
      skip(url) {
        if(!this.vuex_token){
          this.skipLogin()
        }else{
          uni.navigateTo({
            url
          });
        }
        
      },
      // 退出登录
      handleLogout() {
        uni.showModal({
          title: '提示',
          content: '确定要退出当前登录？',
          confirmColor: '#05B196',
          success: (res) => {
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/index/index',
                success: () => {
                  this.$u.vuex('vuex_token', '');
                  this.$u.vuex('vuex_user', {});
                  this.$u.vuex('vuex_openid', '');
                  uni.clearStorageSync();
                }
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.mine-page {
  width: 100vw;
  min-height: 100vh;
  background-color: #f0f0f0;
}
.mine-head-wrapper {
  background-color: #05B196;
  @include flex;
  box-sizing: border-box;
  padding: 30rpx 30rpx 160rpx;
  .avatar-box {
    padding: 10rpx;
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    background: rgba(#fff, .5);
    overflow: hidden;
    margin-right: 22rpx;
    .avatar {
      width: 110rpx;
      height: 110rpx;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .avatar-info {
    flex: 1;
    color: #fff;
    overflow: hidden;
    .nologin {
      @include flex(row,center,flex-start);
      .arrow {
        position: relative;
        @include arrow(42,#fff,1);
      }
    }
    .logined-info {
      line-height: 1.2;
      .name {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 12rpx;
      }
      .id {
        font-size: 22rpx;
      }
    }
  }
}
.mine-menu-wrapper {
  transform: translateY(-120rpx);
  padding: 0 30rpx;
  overflow: hidden;
  box-sizing: border-box;
  .menu-group {
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    margin-top: 20rpx;
    .menu-item {
      height: 100rpx;
      padding: 0 6rpx 0 24rpx;
      box-sizing: border-box;
      box-shadow: 0 1px 0 #eee;
      @include flex;
      .icon {
        width: 46rpx;
        height: 46rpx;
        margin-right: 28rpx;
      }
      .title {
        flex: 1;
        overflow: hidden;
        font-size: 26rpx;
        color: #333333;
      }
      .arrow {
        position: relative;
        @include arrow(44,#666,1);
      }
    }
  }
}
</style>
